<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>疑难单</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
		<style>
			body {
				background-color: #F2F2F2;
			}
			.m-t {
				margin-top: 13px;
			}
			.color-1 {
				color: #6e6e6e;
			}
			.color-2 {
				color: #b4b4b4;
			}
			.color-3 {
				color: #ff0f2e;
			}
			.color-4 {
				color: #ff8000;
			}
			#list-difficult {
				background-color: #fff;
			}
			#list-difficult > li {
				padding: 0 15px;
				border-bottom: #f8f8f8 13px solid;
			}
			#list-difficult > li:nth-last-child(1) {
				border-bottom: 0;
			}
			#list-difficult > li > div {
				padding: 13px 0;
			}
			#list-difficult > li > div:nth-child(1) {
				border-bottom: #e6e6e6 1px solid;
			}
			#list-difficult .complaint-title {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 180px;
			}
			#list-difficult .complaint-btn {
				padding: 2px 5px;
				background-color: #FF9F00;
				color: #fff;
				border-radius: 4px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="list-item-temp" style="display: none;">
			<div class="title-container flex-container flex-between">
				<div class="acms-msg-1 complaint-title">
					--
				</div>
				<div class="acms-msg-2 color-4">
					--
				</div>
			</div>
			<div class="msg-container">
				<div class="flex-container flex-between">
					<div class="acms-msg-3 color-1">
						--
					</div>
					<div class="acms-msg-4 color-2">
						--
					</div>
				</div>
				<div class="m-t flex-container flex-between">
					<div  class="acms-msg-5 color-1">
						--
					</div>
					<div class="acms-msg-6"></div>
				</div>
			</div>
		</div>
		<ul id="list-difficult"></ul>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/request.js"></script>
	<script type="text/javascript">
		//疑难单数
		var mCpCount;
		//item下标
		var mIndex;
		//接障==1、结单==2、疑难单==3,表示搜索那个页面的标记
		var mTag = 3;
		//用户id
		var mUserId;
		var mListView;
		//列表数据
		var mLVDatas;
		//是否加载更多
		var mIsLoadMore = false;
		//第几页
		var mPageNum = 1;
		//每页数据条数
		var mPageSize = 10;
		apiready = function() {
			initData();
			initView();
			requestList(mPageSize, mPageNum);
		};
		function initData() {
			mUserId = $api.getStorage(MyCom.key_userid);
		}

		function initView() {
			mListView = document.getElementById('list-difficult');
			listenerScrollBottom();
			setRemoveYNDListener();
		}

		/**
		 * 显示列表
		 * @param{Object} datas - 用户数据数组json
		 */
		function showListView(datas) {
			if (datas == null || datas.length < 1) {
				return;
			}
			var index = 0;
			var item = '';
			//判断是否是加载更多。是，mLVDatas添加数据。否，mLVDatas清空数据，mListView清空html
			if (mIsLoadMore) {
				for (index in datas) {
					mLVDatas.push(datas[index]);
				}
			} else {
				mListView.innerHTML = '';
				mLVDatas = null;
				mLVDatas = datas;
			}
			index = 0;
			//展示listview
			for (index in datas) {
				item = createLVItem(datas[index]);
				mListView.appendChild(item);
			}
			if (mIsLoadMore) {
				mIsLoadMore = false;
				hideLoadMoreView();
			} else {
				api.hideProgress();
			}
		}

		/**
		 * 创建列表的item
		 * @param {Object} data - 用户信息的object对象
		 */
		function createLVItem(data) {
			//状态： 1 待处理 2.已受理 3.处理中  4.已处理 5.疑难单 6.报障关闭 7.已完成
			var status = data.status;
			if (status != 5) {
				MyCom.errorTip(2);
			}
			var li = document.createElement('li');
			li.innerHTML = document.getElementById('list-item-temp').innerHTML;
			//故障情况
			var msg_1 = li.getElementsByClassName('acms-msg-1')[0];
			//故障状态
			var msg_2 = li.getElementsByClassName('acms-msg-2')[0];
			//报障人
			var msg_3 = li.getElementsByClassName('acms-msg-3')[0];
			//报障时间
			var msg_4 = li.getElementsByClassName('acms-msg-4')[0];
			//故障地点
			var msg_5 = li.getElementsByClassName('acms-msg-5')[0];
			msg_1.innerText = MyCom.dataFaultTolerant(data.title);
			msg_3.innerText = MyCom.dataFaultTolerant(data.nick_name);
			msg_4.innerText = MyCom.dataFaultTolerant(data.create_time);
			msg_5.innerText = MyCom.dataFaultTolerant(data.warn_location);
			msg_2.innerText = '疑难单';
			li.onclick = function() {
				var clickIndex = 0;
				var lis = mListView.getElementsByTagName('li');
				var i = 0;
				for (; i < lis.length; i++) {
					if (this == lis[i]) {
						clickIndex = i;
						mIndex = clickIndex;
						break;
					}
				}
				openDetailsW(mLVDatas[mIndex].id);
			}
			return li;
		}

		/**
		 * 移除 item
		 * @param{Number} index - 要移除的item的下标
		 */
		function removeLVItem(index) {
			mListView.removeChild(mListView.getElementsByTagName('li')[index]);
			mLVDatas.splice(index, 1);
			triggerCpCountListener(--mCpCount);
		}

		/**
		 * 打开详情页
		 */
		function openDetailsW(cpid) {
			console.log('openDetailsW--id=' + cpid);
			api.openWin({
				name : 'order_details',
				url : './order_details.html',
				pageParam : {
					'id' : cpid,
					'tag' : 3
				}
			});
		}

		/**
		 * 隐藏“加载更多”的view
		 */
		function hideLoadMoreView() {
			var loadViews = document.getElementsByClassName('load-more-content');
			if (loadViews.length != 0) {
				document.getElementsByTagName('body')[0].removeChild(loadViews[0]);
			}
		}

		/**
		 * 展示“加载更多”的view
		 */
		function showLoadMoreView() {
			var loadView = document.createElement('div');
			loadView.className = 'load-more-content';
			loadView.innerHTML = '<img src="../../image/icon_loading.png" /><span>加载中</span>';
			document.getElementsByTagName('body')[0].appendChild(loadView);
		}

		/**
		 * 加载更多失败处理
		 */
		function loadMoreFailure(msg) {
			msg = msg || '加载更多失败！'
			//还原页数（第几页）
			mPageNum--;
			mIsLoadMore = false;
			hideLoadMoreView();
			api.toast({
				msg : msg
			});
		}

		//设置“滑动到底部”事件监听
		function listenerScrollBottom() {
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				console.log();
				//判断列表是否已经到达屏幕底部，是，就代表可以加载更多；否，就不让加载更多。
				if (mListView.offsetHeight >= api.frameHeight && !mIsLoadMore) {
					mIsLoadMore = true;
					showLoadMoreView();
					requestList(mPageSize, ++mPageNum)
				}
			});
		}

		/**
		 * 服务器请求：获取结单数据
		 * @param{int} pgS - 每页的数据条数
		 * @param{int} pgN - 页数
		 */
		function requestList(pgS, pgN) {
			var tag = 'requestList_more';
			if (!mIsLoadMore) {
				api.showProgress({
				});
				api.cancelAjax({
					tag : tag
				});
				tag = null;
			}
			var data = {
				values : {
					'page' : pgN,
					'rows' : pgS,
					'status' : mTag,
					'userid' : mUserId
				}
			};
			var url = $api.getStorage(MyCom.key_server) + MyRequest.URL_GET_CP;
			MyRequest.requestMethod(url, data, function(re) {
				console.log('接障处理接口--接障--ret=' + JSON.stringify(re));
				if (re) {
					var code = re.code;
					var count = re.count;
					//如果不是加载更多，那么就对单数处理
					if (!mIsLoadMore) {
						mCpCount = count;
						triggerCpCountListener(mCpCount);
					}
					if (code == 1) {
						showListView(re.list);
					} else {
						if (!mIsLoadMore) {
							api.hideProgress();
							api.toast({
								msg : re.msg
							});
						} else {
							//还原页数（第几页）
							loadMoreFailure('没有更多数据！');
						}
					}
				} else {
					if (!mIsLoadMore) {
						MyCom.errorTip(2);
					} else {
						loadMoreFailure();
					}
				}
			}, tag);
		}

		/**
		 * 设置“移除疑难单”的监听
		 */
		function setRemoveYNDListener() {
			api.addEventListener({
				name : 'RemoveYNDListener'
			}, function(ret, err) {
				if (ret) {
					removeLVItem(mIndex);
				} else {
					MyCom.errorTip(1);
				}
			});
		}

		/**
		 * 触发“设置故障总单的view”的监听
		 * @param{Number} msg - 总单数
		 */
		function triggerCpCountListener(msg) {
			api.sendEvent({
				name : 'CpCountListener',
				extra : {
					'msg' : msg
				}
			});
		}
	</script>
</html>
